
<div style="height:32px"></div>

<script type="text/javascript">
	Droppables.drops = []
</script>


<%
   msie_height_fix = isMSIE? ? 6:0;
   msie_width_fix = isMSIE? ? 1:0;

   @aircraft_count = @aircrafts.size
   air_height = 20
   type_height = 17
   graph_height = @aircraft_count*air_height+(@types.length+1)*type_height+@instructors.length*air_height 
   graph_width = 680
   label_width = 100.0
   tops = {}
   offset = 0
   width_per_second = (graph_width-label_width-1)/(@days*16*60*60)
   width_per_day = (graph_width-label_width-1)/(@days)
   width_per_hour = width_per_second*60*60

   @from = @date
   @to = @date+@days
   @fixfrom = Time.local(@from.year,@from.month,@from.day,7)
   tmp = @to 
   @fixto = Time.local(tmp.year,tmp.month,tmp.day,23)
   %>
<!-- main schedule painting area -->
<div id="graph" 
style="position:relative; text-align:left; left:-6px; width:<%=graph_width%>px;max-width:100%;height:<%=graph_height%>px">

<!-- vertical background bars -->

<% (0..@days-1).each{|x|%>
	<div class="vbar" id="vbar1<%=x%>" 
    style="top:-48px; height:20px; width:<%=width_per_day+2%>px;
           left:<%=label_width+x*width_per_day%>px; 
			border-left: 1px solid black;
     		border-top: 1px solid black;
			text-align: center;
           ">
    </div>
   <div class="vbar" id="vbar1<%=x%>" 
    style="top:-27px; height:<%=graph_height+25%>px; width:<%=width_per_hour+2%>px;
           left:<%=label_width+x*width_per_day%>px; background:#f0f5ff;
			border-left:1px solid black;
     		text-align: left;
           ">
    </div>
	<% (1..15).each{|i| %>
	   <div class="vbar" id="vbar3<%=x%>" 
	    style="top:-27px; height:<%=graph_height+25%>px; width:<%=width_per_hour+2%>px;
	           left:<%=label_width+x*width_per_day+width_per_hour*i%>px; background:<%= i%2==1 ? "#d0e5ff" : "#f0f5ff"%>;
	     		text-align: left;
	           ">
	    </div>
	<%	} %>
    
<% } %>


<!-- aircraft section -->
	<% @types.each{|type| %>
	    <div id="over<%=type.id%>" class="type_label_over" style="top:<%=offset%>px; width:<%=graph_width%>px">
	        <div class="shift_right"><%= type.type_name %></div>
	    </div>
	    <% offset += type_height %>
		<% @aircrafts.each{|aircraft| %>
		    <% if aircraft.type.id != type.id 
	    	       next
		       end %>
		    <div id="aircraft<%=aircraft.id%>" style="border-bottom: 1px solid black; height:<%=isMSIE? && !@master_schedule ? 20 : 14%>px;width:<%=graph_width%>px; top:<%=offset-msie_height_fix%>px" 
		         class="aircraft_name">
		    </div>
	
	         <% tops["a#{aircraft.id}"] = offset %>
		     <% offset += air_height %> 
		<% } %>
	<% } %>
	
<!-- instructor section -->
	<div style="top:<%=offset%>px;width:<%=graph_width%>px"  
	   class="type_label_over">
	<div class="shift_right">Instructors</div></div>
	
    <% offset += type_height %>
	 <% @instructors.each{|instructor| %>
		    <div id="instructor<%=instructor.id%>" style="border-bottom: 1px solid black;height:14px; width:<%=graph_width%>px; top:<%=offset%>px" class="aircraft_name">
		    </div>
             <% tops["i#{instructor.id}"] = offset %>
		    <% offset += air_height %>
		<% } %>
		

<!-- top panel auto-scroll code  -->
        <script type="text/javascript">
             function autoposition_titles(){
                $("top_bar").style.top = "-47px";
                sc = getPageScroll()
                if(sc[1]>150+<%= msie_height_fix*2 %>){
                    $("top_bar").style.top = sc[1]-230-<%= msie_height_fix*3 %>+"px";                    
                }
             }
    
            if (window.addEventListener) {
                window.addEventListener("scroll", function (e) { autoposition_titles(); }, false);
            } else if (window.attachEvent) {
	            window.attachEvent('on' + "scroll", function (e) { autoposition_titles(); });
            }
        </script> 


<!-- sliding left panel -->
		<div id="left_bar" style="height:<%=graph_height%>px;width:100px;position:absolute; top:0px; left:0px; text-align:left;"  height=<%=graph_height%>>
		<% @aircrafts.each{|a|%>
    		<% if tops["a#{a.id}"].nil? then next end %>
		    <div style="width:95px;max-width:95px;overflow:hidden;position:absolute;top:<%=tops['a'+a.id.to_s]%>px" class="aircraft_name">
		         [<%= a.current_office.name[0..0] %>]&nbsp;<%= a.identifier%>
		    </div>
		<% } %>
    	 <% @instructors.each{|i| %>
		    <div style="width:95px;max-width:95px;max-height:20px;overflow:hidden;position:absolute;top:<%=tops['i'+i.id.to_s]%>px" class="aircraft_name">
		         <%= i.full_name_rev_link%>
		    </div>
		<% } %>
        </div> 


<!-- sliding top panel -->

<div id="top_bar" style="position:absolute; left:0px; top:-47px; font-size:10pt; font-weight:bold; z-index:255"> 

	<div class="vbar" 
    style="background:#2255aa;width:<%= graph_width-label_width %>px;  left:<%= label_width+msie_width_fix%>px; padding:<%= 2-msie_width_fix %>px;	text-align: center;">

	<%= start_form_tag({:action => '#',:controller => '#'},{:id => 'schedule_time_form',:style=>"margin:0px;padding:0px"})%>
	<div style="float:left; font-size:9pt" >
		
		<label style="padding:2px;color:white;font-size:9pt">Schedule from: </label> 	
	
		<input name="date" id="date" value="<%=@date%>" style="display:none"/>
		<input id="trigger" type="submit" value="<%=@date%>" onclick="return false;" style="font-size:8pt;">
		
			<label style="padding:2px;color:white;font-size:9pt">show </label> 
			<%= select_tag 'days', options_for_select([1,2,4,7,14].map{|x| x.to_s}, @days.to_s), {:style=>"font-size:8pt"} %>
			<label style="padding:2px;color:white;font-size:9pt"> days</label> 
		
	</div>

	
		<div style="float:right; padding-top:5px;padding-right:5px">
		<% if session[:schedule][:filter]=='false' %>
		<a style="color:white;padding-right:5px" href="#" onclick="new Ajax.Updater('schedule_browser', '/reservation/schedule', {asynchronous:true, evalScripts:true,parameters:'date='+schedule_date+'&office_filter=true'})" >
			Show <%=current_user.default_office.name%> Only</a>
		<% else %>
		<a style="color:white;padding-right:5px"  href="#" onclick="new Ajax.Updater('schedule_browser', '/reservation/schedule', {asynchronous:true, evalScripts:true,parameters:'date='+schedule_date+'&office_filter=false'})" >
		Show All Offices</a>
		<% end %>

		<script type="text/javascript">
			new Form.Element.EventObserver($('days'), function(){
				new Ajax.Updater('schedule_browser', '/reservation/schedule', {asynchronous:true, evalScripts:true,parameters:'days='+$('days').value})
			});
		</script>

		<a href="#" style="color:white;padding-right:5px"  onclick="window.location='/schedule/printable_schedule?date='+schedule_date">Print</a>
		<%= link_to("Options", {:action => "preferences"},{:style=>'color:white'})%>
		</div>
	
	
	
	<div style="padding-top:4px">
	<a href="#" style="color:white" 
	   onclick="show_loading_indicator('graph'); new Ajax.Request('/reservation/update_schedule',{asynchronous:true, evalScripts:true, parameters:'date=' + previous_schedule_date});">	<< </a> &nbsp&nbsp&nbsp
	
	<a href="#" style="color:white" 
	   onclick="show_loading_indicator('graph'); new Ajax.Request('/reservation/update_schedule', {asynchronous:true, evalScripts:true, parameters:'date=' + next_schedule_date})
	;"> >></a>
	</div>
	
	<%= end_form_tag %>		


	    </div>

<% (0..@days-1).each{|x|%>
	
	<div class="vbar" id="vbar5<%=x%>" 
    style="background:#555555; color: #ffeeee; width:<%=width_per_day-1%>px;       left:<%=label_width+x*width_per_day+1%>px; 	top:22px;	text-align: center;">
		<span id="date_label_<%= x %>"><%= (Date.new(@from.year,@from.month,@from.day)+x).to_time.strftime("%a, %b  %d")%></span>
    </div>


   <div class="vbar"  
    style=" top:34px;width:<%=width_per_hour+2%>px;
           left:<%=label_width+x*width_per_day%>px; background:#f0f5ff;
     		text-align: left;			border-left:1px solid black;
     		
           ">
		<%= @days < 3 ? 7: nil%>
    </div>


	<% (1..15).each{|i| %>
	   <div class="vbar" id="vbar3<%=x%>" 
	    style="top:34px;width:<%=width_per_hour+2%>px;
	           left:<%=label_width+x*width_per_day+width_per_hour*i%>px; background:<%= i%2==1 ? "#d0e5ff" : "#f0f5ff"%>;
	     		text-align: left;
	           ">
			<%= @days < 3 ? (i+6)%12+1: nil%>
	    </div>
	<%	} %>
<% } %>
</div>
</div>
<div style="width:100%">
<table cellspacing="10px">
<tr>
	<td><label>Legend:</label></th>
<td style="text-align:center;width:200px"><div style="display:marker; height:20px;  background: lightgreen;"><label style="color:#001b57">Approved</label></div></td>
<td style="text-align:center;width:200px"><div style="display:marker; height:20px; background: yellow;"><label style="color:#001b57">Awaiting Approval</label></div></td>
<td style="text-align:center;width:200px"><div style="display:marker; height:20px; background: tan;"><label style="color:#001b57">Blocked</label></div></td>
</tr></table>
</div>
 
	<script type="text/javascript">
	    Calendar.setup({
	        inputField     :    "date",     // id of the input field
	        ifFormat       :    "%Y-%m-%d",     // format of the input field (even if hidden, this format will be honored)
	        button         :    "trigger",       
	        daFormat       :    "%Y-%m-%d",   // format of the displayed date
	        align          :    "Tl",           // alignment (defaults to "Bl")
	        singleClick    :    true,
			onClose	   :   function(cal){ 
					cal.hide();
                    show_loading_indicator('graph'); 
					new Ajax.Request('/reservation/update_schedule', {asynchronous:true, evalScripts:true, parameters:'date=' + $('date').value})
				 }
	    });
	

	
		
		graph_height = <%= graph_height %>
		graph_width = <%= graph_width %>
		label_width = <%= label_width %>
		tops = $H(<%= tops.to_json %>)
		width_per_second = <%= width_per_second %>
		width_per_day = <%= width_per_day %>
		width_per_hour = <%= width_per_hour %>		
		admin = <%= admin? or instructor? %>
		current_user = <%= current_user.id %>
		num_days = <%= @days %>
		
		new Ajax.Request('/reservation/update_schedule', {asynchronous:true, evalScripts:true, parameters:'date=' + '<%= @date.to_s %>'})
		show_loading_indicator('graph');
	</script>